<template>
  <div>
    <div style="height: 83vh" class="flex flex-wrap bg-white p-2 overflow-y-auto">
      <div class="full-page" v-if="total == 0">
        <Empty :image="simpleImage"/>
      </div>
      <div style="width: 20%" class="flex-item p-1" v-for="(item, index) in gridData">
        <!--        <BadgeRibbon :text="'#'+ (index + 1) +'   单量(' + item.order_num + ')' + '   单数(' + item.order_counts + ')'" color="#ee4f12">-->
        <Card hoverable class="cw-card">
          <div class="badge-ribbon">{{
              '#' +
              ((searchInfo.page - 1) * searchInfo.pageSize + index + 1) +
              '   单量(' +
              item.order_num +
              ')' +
              '   单数(' +
              item.order_counts +
              ')'
            }}
          </div>
          <template #cover>
            <Image
              :height="200"
              fallback="http://wt-shop.com/storage/images/2024-03/header.jpg"
              :src="item.image"
            />
          </template>
          <Tooltip
            @click="keepa_detail({ domain_id: item['domain_id'], asin: item['_id']['asin'] })"
          >
            <template #title>{{ item.title }}</template>
            <CardMeta :title="item.title" :description="item._id.asin"/>
          </Tooltip>
          <div class="mt-10px white-wrap">
            <Tooltip placement="topLeft" :title="item.category_tree">
              分类树：{{ item.category_tree }}
            </Tooltip>
          </div>
          <div class="flex-wt">
            <div>
              <Tag v-if="item.group_name" color="green">{{ item.group_name }}</Tag>
            </div>
            <div><span class="price">{{ item.buy_box_current }}</span><span style="margin-left: 6px">({{ translateCoinType(item.domain_id) }}) </span></div>
          </div>
          <div v-if="item.sj_name" class="mt-6px" @click="showProductInfo(item)">
            <Tag color="red">{{ item.sj_name }}</Tag>
          </div>
          <div v-else class="mt-6px">
            <Tag color="cyan">无数据名</Tag>
          </div>
          <Rate size="5" v-model:value="item.reviews_rating" disabled allow-half/>
          <span class="star-rating">{{ item.reviews_rating }}({{ item.reviews_review_count }})</span
          ><br/>
        </Card>

      </div>
    </div>
    <div class="bg-white p-1 text-right">
      <Pagination
        v-if="total > 0"
        :show-total="(total) => `总计 ${total} 条`"
        size="small"
        :defaultPageSize="30"
        :pageSizeOptions="['30', '60', '90']"
        v-model:pageSize="pageSize"
        v-model:current="searchInfo.page"
        show-quick-jumper
        :total="total"
        @change="onChange"
      />
    </div>

    <BasicModal
      @keepaDetail="keepa_detail"
      @register="register"
      :modalData="modalData"
      @visible-change="setModalData"
    />
  </div>
</template>
<script lang="ts" setup>
import BasicModal from './Modal.vue'
import {translateCoinType} from '/@/utils/common'
import {FormInstance, Select, SelectOption, Empty, DatePicker, Rate, Card, CardMeta, Image, Form, FormItem, Row, Col, Button, Pagination, Tooltip, Tag} from 'ant-design-vue'
import {reactive, ref} from 'vue'
import {DownOutlined, UpOutlined} from '@ant-design/icons-vue'
import {useModal} from '/@/components/Modal'
import {getProductBySjNameGroup} from '/@/api/demo/product'

const props = defineProps({
  gridData: Array,
  searchInfo: Object,
  total: Number,
  current: Number,
})
const [register, {openModal: openProductModal, setModalProps}] = useModal()

const emit = defineEmits(['confirmSearch', 'pageClick'])
const visible = ref<boolean>(false)
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const pageSize = ref<number>(30)
const expand = ref(false)
const isEmpty = ref(true)
const modalData = ref([])

/**
 * 查看数据名产品组内信息
 * @param sj_name
 */
function showProductInfo(detail) {
  var formState = {
    sj_name: detail['sj_name'],
    catId: detail['_id']['catId'],
    month_range: props.searchInfo.month_range,
    domainId: props.searchInfo.domainId,
  }
  openProductModal()
  setModalProps({loading: true})
  getProductBySjNameGroup(formState).then(
    (res) => {
      var total_num = 0
      for (var i in res) {
        var item = res[i]
        total_num += item.group_count
      }
      modalData.value = {
        data: res,
        title: detail['sj_name'] + '(' + total_num + ')',
      }
      setModalProps({loading: false})
    },
    (error) => {
      console.log(error)
    },
  )
}

/**
 * 关闭前清空模态框数据
 * @param visible
 */
function setModalData(visible) {
  if (!visible) {
    modalData.value = []
  }
}

const onChange = (pageNumber: number) => {
  emit('pageClick', pageNumber)
}

const keepa_detail = (item) => {
  const keepa_url = 'https://keepa.com/#!product/'
  var keepa_detail = item.domain_id + '-' + item.asin
  console.log(keepa_detail)
  window.open(keepa_url + keepa_detail, '_blank')
}
</script>
<style>
.flex-wt {
  display: flex;
  justify-content: space-between;
}

.mt-6px {
  margin-top: 6px;
}

.mt-10px {
  margin-top: 10px;
  margin-bottom: 5px;
}

.cw-card {
  position: relative;
}

.badge-ribbon {
  position: absolute;
  right: 5px;
  top: 5px;
  background: #ee4f12;
  padding: 2px 5px;
  border-radius: 4px;
  color: white;
}

.full-page {
  width: 100%;
  height: 100%;
  padding-top: 15%;
}

.star-rating {
  vertical-align: text-bottom;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 500;
}

.price {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: red;
}

.ant-image {
  display: flex !important;
  justify-content: center;
  padding: 2px 0;
}

.white-wrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
